import { Layout, Menu } from "antd";
import React from "react";
import "./index.less";
import { Link, Route, Switch } from "react-router-dom";
import { myRoutes } from "../../config/routes";
import { connect } from "react-redux";
import { loginAction } from "../../redux/actions/login";

import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
} from "@ant-design/icons";
import Home from "../../pages/home/home";
const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;

class SiderDemo extends React.Component {
  state = {
    collapsed: false,
  };
  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };
  render() {
    const { location, userInfo, history } = this.props;
    if (userInfo === null) {
      const userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
      if (userInfo) {
        this.props.loginAction(userInfo);
      } else {
        history.replace("/login");
      }
    }
    //刷新也会自动选中的menu
    const activeMenu = myRoutes.find((i) =>
      i.children.find((j) => j.path === location.pathname)
    );
    //子菜单
    const innerRouteList = (routes) => {
      let res = [];
      let r = routes.children;
      for (var i = 0; i < r.length; i++) {
        res.push(
          <Menu.Item key={r[i].path}>
            <Link to={r[i].path}>{r[i].name}</Link>
          </Menu.Item>
        );
      }
      return res;
    };
    //父菜单
    const outerRouteList = (routes) => {
      let res = [];
      for (var i = 0; i < routes.length; i++) {
        res.push(
          <SubMenu key={routes[i].name} title={routes[i].name}>
            {innerRouteList(routes[i])}
          </SubMenu>
        );
      }
      return res;
    };
    const routes = (routes) => {
      let res = [];
      routes
        .filter((i) => i.children && i.children.length > 0)
        .forEach((q) => {
          q.children.forEach((item) => {
            res.push(
              <Route
                key={item.path}
                path={item.path}
                component={item.component}
                // render={(props) => <RouterGuard {...item} {...props} />}
              />
            );
          });
        });
      res.push(
        <Route
          key="/"
          path="/"
          component={Home}
          // render={(props) => <RouterGuard {...props} />}
        />
      );
      return res;
    };
    return (
      <Layout>
        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
          <div className="logo">
            <img src="" alt="" />
            <h2 className="logo-text">超算矿业联盟</h2>
          </div>
          <Menu
            theme="dark"
            mode="inline"
            defaultOpenKeys={[activeMenu ? activeMenu.name : "首页"]}
            defaultSelectedKeys={[location.pathname]}
          >
            <Menu.Item key="/" icon={<UserOutlined />}>
              <Link to="/">首页</Link>
            </Menu.Item>
            {outerRouteList(myRoutes)}
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }}>
            {React.createElement(
              this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
              {
                className: "trigger",
                onClick: this.toggle,
              }
            )}
          </Header>
          <Content className="site-layout-background">
            <Switch>{routes(myRoutes)}</Switch>
          </Content>
        </Layout>
      </Layout>
    );
  }
}
export default connect((state) => ({ userInfo: state.user }), { loginAction })(
  SiderDemo
);
